<template>
	<view class="content">

		<!-- 

  -->
		<uni-list style="width:650rpx">
			<uni-list-item title="机器人序列号" :show-badge="true" :badge-text="robot.SerialNum.toString()"></uni-list-item>
			<uni-list-item title="笛卡尔坐标" :show-badge="true" :badge-text="robot.RunTime.toString()"></uni-list-item>
			<uni-list-item title="轴坐标" :show-badge="true" :badge-text="''+robot.Axis1.Axis+','+robot.Axis2.Axis+','+robot.Axis3.Axis+','+robot.Axis4.Axis+','+robot.Axis5.Axis+','+robot.Axis6.Axis"></uni-list-item>
			<uni-list-item title="运行时间" :show-badge="true" :badge-text="robot.RunTime.toString()"></uni-list-item>
		</uni-list>

		<table style="width:600rpx;margin-top: 20px;font-size:small;">
			<tr>
				<td>轴</td>
				<td>温度</td>
				<td>速度</td>
				<td>扭矩</td>
				<td>电流</td>
			</tr>
			<tr>
				<td>A1</td>

				<td>
					<uni-badge :text="robot.Axis1.Temp.toString()" :type="robot.Axis1.Temp<threshold.Temp?'success':'error'"></uni-badge>
				</td>
				<td>
					<uni-badge :text="robot.Axis1.Vel.toString()" :type="robot.Axis1.Vel<threshold.Vel?'success':'error'"></uni-badge>
				</td>
				<td>
					<uni-badge :text="robot.Axis1.Torque.toString()" :type="robot.Axis1.Torque<threshold.Torque?'success':'error'"></uni-badge>
				</td>
				<td>
					<uni-badge :text="robot.Axis1.Curr.toString()" :type="robot.Axis1.Curr<threshold.Curr?'success':'error'"></uni-badge>
				</td>
			</tr>
			<tr>
				<td>A2</td>
				<td>
					<uni-badge :text="robot.Axis2.Temp.toString()" :type="robot.Axis2.Temp<threshold.Temp?'success':'error'"></uni-badge>
				</td>
				<td>
					<uni-badge :text="robot.Axis2.Vel.toString()" :type="robot.Axis2.Vel<threshold.Vel?'success':'error'"></uni-badge>
				</td>
				<td>
					<uni-badge :text="robot.Axis2.Torque.toString()" :type="robot.Axis2.Torque<threshold.Torque?'success':'error'"></uni-badge>
				</td>
				<td>
					<uni-badge :text="robot.Axis2.Curr.toString()" :type="robot.Axis2.Curr<threshold.Curr?'success':'error'"></uni-badge>
				</td>
			</tr>
			<tr>
				<td>A3</td>
				<td>
					<uni-badge :text="robot.Axis3.Temp.toString()" :type="robot.Axis3.Temp<threshold.Temp?'success':'error'"></uni-badge>
				</td>
				<td>
					<uni-badge :text="robot.Axis3.Vel.toString()" :type="robot.Axis3.Vel<threshold.Vel?'success':'error'"></uni-badge>
				</td>
				<td>
					<uni-badge :text="robot.Axis3.Torque.toString()" :type="robot.Axis3.Torque<threshold.Torque?'success':'error'"></uni-badge>
				</td>
				<td>
					<uni-badge :text="robot.Axis3.Curr.toString()" :type="robot.Axis3.Curr<threshold.Curr?'success':'error'"></uni-badge>
				</td>
			</tr>
			<tr>
				<td>A4</td>
				<td>
					<uni-badge :text="robot.Axis4.Temp.toString()" :type="robot.Axis4.Temp<threshold.Temp?'success':'error'"></uni-badge>
				</td>
				<td>
					<uni-badge :text="robot.Axis4.Vel.toString()" :type="robot.Axis4.Vel<threshold.Vel?'success':'error'"></uni-badge>
				</td>
				<td>
					<uni-badge :text="robot.Axis4.Torque.toString()" :type="robot.Axis4.Torque<threshold.Torque?'success':'error'"></uni-badge>
				</td>
				<td>
					<uni-badge :text="robot.Axis4.Curr.toString()" :type="robot.Axis4.Curr<threshold.Curr?'success':'error'"></uni-badge>
				</td>
			</tr>
			<tr>
				<td>A5</td>
				<td>
					<uni-badge :text="robot.Axis5.Temp.toString()" :type="robot.Axis5.Temp<threshold.Temp?'success':'error'"></uni-badge>
				</td>
				<td>
					<uni-badge :text="robot.Axis5.Vel.toString()" :type="robot.Axis5.Vel<threshold.Vel?'success':'error'"></uni-badge>
				</td>
				<td>
					<uni-badge :text="robot.Axis5.Torque.toString()" :type="robot.Axis5.Torque<threshold.Torque?'success':'error'"></uni-badge>
				</td>
				<td>
					<uni-badge :text="robot.Axis5.Curr.toString()" :type="robot.Axis5.Curr<threshold.Curr?'success':'error'"></uni-badge>
				</td>
			</tr>
			<tr>
				<td>A6</td>
				<td>
					<uni-badge :text="robot.Axis6.Temp.toString()" :type="robot.Axis6.Temp<threshold.Temp?'success':'error'"></uni-badge>
				</td>
				<td>
					<uni-badge :text="robot.Axis6.Vel.toString()" :type="robot.Axis6.Vel<threshold.Vel?'success':'error'"></uni-badge>
				</td>
				<td>
					<uni-badge :text="robot.Axis6.Torque.toString()" :type="robot.Axis6.Torque<threshold.Torque?'success':'error'"></uni-badge>
				</td>
				<td>
					<uni-badge :text="robot.Axis6.Curr.toString()" :type="robot.Axis6.Curr<threshold.Curr?'success':'error'"></uni-badge>
				</td>
			</tr>
		</table>
	</view>
</template>

<script>
	import uniCard from '@/components/uni-card/uni-card.vue'
	import uniBadge from "@/components/uni-badge/uni-badge.vue"
	import {
		uniList,
		uniListItem,
		uniListChat
	} from '@dcloudio/uni-ui'
	import mqtt from 'mqtt'
	import Enumerable from 'linq-js'
	import {
		title,
		broker
	} from '../../common/config.js'
	//var Enumerable = require('linq');




	//let aaa=myList.asEnumerable().any(x=>x.Name=="a")
	//console.log(aaa)
	/*var arrRes =myList.asEnumerable().where(function(x){
		x.Name=='Jim'
	}).ToArray()*/


	const options = {
		keepalive: 60,
		connectTimeout: 40000,
		// clientId: 'mqtitId-Home',
		reschedulePings: false,
		username: broker.username,
		password: broker.password,
		clean: true
	}
	var client = mqtt.connect(broker.url, options)


	export default {
		// components: {uniPopup,uniListItem,uniListChat},
		components: {
			uniCard
		},
		data() {
			return {
				title: 'Hello',
				msg: '',
				threshold: {
					Temp: 10,
					Vel: 10,
					Torque: 10,
					Curr: 10

				},
				robot: {
					"Sn": "Bad",
					"RobotConfig": {
						"Name": "Bad",
						"Ip": "Bad",
						"Port": 7000,
						"Desc": "Bad",
					},
					"SerialNum": "Bad",
					"RunTime": 0,
					"Axis1": {
						"Axis": 0,
						"Temp": 0,
						"Curr": 0,
						"Torque": 0,
						"Vel": 0
					},
					"Axis2": {
						"Axis": 0,
						"Temp": 0,
						"Curr": 0,
						"Torque": 0,
						"Vel": 0
					},
					"Axis3": {
						"Axis": 0,
						"Temp": 0,
						"Curr": 0,
						"Torque": 0,
						"Vel": 0
					},
					"Axis4": {
						"Axis": 0,
						"Temp": 0,
						"Curr": 0,
						"Torque": 0,
						"Vel": 0
					},
					"Axis5": {
						"Axis": 0,
						"Temp": 0,
						"Curr": 0,
						"Torque": 0,
						"Vel": 0
					},
					"Axis6": {
						"Axis": 0,
						"Temp": 0,
						"Curr": 0,
						"Torque": 0,
						"Vel": 0
					}
				}
			}
		},
		created() {

		},
		onLoad() {
			this.mqttMsg()
		},
		methods: {
			mqttMsg() {
				client.on('connect', (e) => {
					console.log("连接成功！！！")
					client.subscribe(broker.topic, {
						qos: 0
					}, (error) => {
						if (!error) {
							console.log('订阅成功')
						} else {
							console.log('订阅失败')
						}
					})

				})
				// 接收消息处理
				client.on('message', (topic, message) => {
					console.log('收到来自', topic, '的消息:', message.toString())
					// console.log('消息内容', message)
					//this.msg = message.values
					if (topic == broker.topic) {
						var str = String.fromCharCode.apply(null, message);

						var res = JSON.parse(str);
						//console.log('消息内容', res.RobotConfig.Axis1.Temp)

						this.robot = res;
						console.log('消息内容', this.robot)
					}

				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 400rpx;
		width: 600rpx;
		margin-top: 10rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 20rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	div {
		-moz-column-count: 3;
		/* Firefox */
		-webkit-column-count: 3;
		/* Safari 和 Chrome */
		column-count: 3;
	}

	tr {
		height: 80rpx;
	}
</style>
